<template>
  <div class="header clearbox">
    <h1>Test文库练习</h1>
    <div class="nav clearbox">
      <p @click="showfun">
        <svg
          t="1647324440934"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2704"
          width="200"
          height="200"
        >
          <path
            d="M896 256H128c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h768c23.6 0 42.7 19.1 42.7 42.7S919.6 256 896 256zM896 853.3H128c-23.6 0-42.7-19.1-42.7-42.7S104.4 768 128 768h768c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.6-42.7 42.6zM896 554.7H128c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h768c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7z"
            p-id="2705"
            fill="#ffffff"
          ></path>
        </svg>
      </p>
      <el-menu
        :mode="modes"
        background-color="#81D8D0"
        text-color="#fff"
        active-text-color="yellow"
        default-active="1"
        :class="[show]"
      >
        <el-menu-item index="1">
          <router-link to="/">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/addtk">录题系统</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/selecttk">查题系统</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/prevtk">出题系统</router-link>
        </el-menu-item>
        <el-menu-item index="5">
          <router-link to="/tags">标题组管理</router-link>
        </el-menu-item>
        <el-menu-item index="6">
          <router-link to="/login">登录</router-link>
        </el-menu-item>
        <el-menu-item index="7">
          <router-link to="/res">注册</router-link>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      modes: "horizontal",
      show: "",
    };
  },
  methods: {
    showfun: function () {
      this.modes = this.modes == "horizontal" ? "vertical" : "horizontal";
      this.show = this.show == "" ? "block" : "";
    },
  },
};
</script>

<style scoped></style>
